<template>
  <div class="contents">
    <PanelTitle title="品种产量" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

let curChose = ref(0);

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/plan/variety/yield/statist/list",
    method: "get",
  });
  // let yearlyList = res.data.map((item) => {
  //   return item.yearly;
  // });
  // yearlyList.sort((a, b) => a-b)
  // yearlyList = Array.from(new Set(yearlyList))
  // let varietyNameList = res.data.map((item) => {
  //   return item.varietyName;
  // });
  // varietyNameList = Array.from(new Set(varietyNameList))

  // let list = []
  // for(let y of yearlyList){
  //   let obj = {year: y}
  //   for(let v of varietyNameList){
  //     obj[v] = 0
  //     for(let item of res.data){
  //       if(item.yearly == y && item.varietyName == v){
  //         obj[v] = item.yearYield
  //       }
  //     }
  //   }
  //   list.push(obj)
  // }

  // let series = []
  // for(let v of varietyNameList){
  //   series.push({
  //     name: v,
  //     type: "line",
  //     data: list.map(obj => obj[v])
  //   })
  // }

  let yearlyList = []
  for (let item of res.data) {
    for (let a of item.varietyYieldList) {
      yearlyList.push(a.yearly)
    }
  }
  yearlyList = Array.from(new Set(yearlyList))
  yearlyList.sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
  for (let item of res.data) {
    let list = []
    for (let y of yearlyList) {
      list.push({ yearly: y, yearYield: 0 })
    }
    for (let obj of list) {
      for (let a of item.varietyYieldList) {
        if (obj.yearly == a.yearly) {
          obj.yearYield = a.yearYield
        }
      }
    }
    item.varietyYieldList = list
  }

  let series = []
  for (let item of res.data) {
    series.push({
      name: item.varietyName,
      type: "line",
      smooth: true,
      symbol: 'none',
      data: item.varietyYieldList.map(obj => obj.yearYield)
    })
  }

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      icon: "circle",
      itemWidth: fitChartSize(6),
      itemHeight: fitChartSize(6),
      bottom: fitChartSize(4),
      data: series.map(item => item.name),
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: fitChartSize(9),
      },
    },
    // color: ["#74FFFD", "#72BCFF", "#FF9745", "#FBFC01"],
    grid: {
      left: "3%",
      right: "7%",
      bottom: "14%",
      top: "14%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: yearlyList,
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：吨",
      nameTextStyle: {
        color: "#fff",
        fontSize: fitChartSize(9),
        padding: [0, fitChartSize(-570), fitChartSize(-4), 0],
      },
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.09)", //线条颜色
        },
      },
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(10),
        },
      },
    },
    series,
  });
});
</script>

<style scoped lang="scss">
.maps {
  height: vh(190);
  width: 100%;
}

.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
  }
}
</style>